<template>
  <nav class="swBar">
    <li index="0"
        @click="change(0)"
        :class="{active:0==num}">综合</li>
    <li index="1"
        @click="pick(1)"
        :class="{active:1==num}">价格</li>
    <li index="2"
        @click="change(2)"
        :class="{active:2==num}">最新上架</li>
    <li index="3"
        @click="change(3)"
        :class="{active:3==num}">筛选</li>
    <van-icon name="arrow-down"
              class="one"
              :class="{active:num==0}"
              size="12" />
    <van-icon name="arrow-up"
              class="two"
              size="12"
              :class="{active:num==1&&sw==1}" />
    <van-icon name="arrow-down"
              class="three"
              :class="{active:num==1&&sw==0}"
              size="12" />
  </nav>
</template>
<script>
export default {
  data () {
    return {
      sw: 0,
      num: 0,
      swlist: ["综合", "价格", "最新上架", "筛选"]
    };
  },
  methods: {
    getUi (page, type) {
      let goods = {
        page,
        type
      };
      this.$store.commit("getGoods", goods);
    },
    change (index) {
      this.$store.state.page = 1;
      this.num = index;
      this.sw = 0;
      this.$store.state.type = 0;
      this.getUi(this.$store.state.page, this.$store.state.type);
    },
    pick (index) {
      this.num = index;
      this.$store.state.page = 1;
      if (this.sw == 0) {
        this.sw++;
        this.$store.state.type = 2;
        this.getUi(this.$store.state.page, this.$store.state.type);
      } else {
        this.sw--;
        this.$store.state.type = 1;
        this.getUi(this.$store.state.page, this.$store.state.type);
      }
    }
  }
};
</script>
<style scoped>
.swBar {
  display: flex;
  width: 100vw;
  height: 0.88rem;
  position: relative;
  background: #fff;
  z-index: 9;
  width: 100%;
  box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.08);
}
.swBar li {
  flex: 1;
  font-size: 0.28rem;
  line-height: 0.88rem;
  text-align: center;
}
.active {
  color: #f21c1c;
}
.one {
  position: absolute;
  top: 0.3rem;
  left: 1.28rem;
}
.two {
  position: absolute;
  top: 0.24rem;
  left: 3.12rem;
}
.three {
  position: absolute;
  top: 0.4rem;
  left: 3.12rem;
}
</style>